<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>像素射击游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <!-- 游戏开始界面 -->
        <div id="start-screen" class="screen">
            <h1>像素射击游戏</h1>
            <p>类似CS的像素风格射击游戏</p>
            <button id="start-button">开始游戏</button>
            <button id="instructions-button">游戏说明</button>
        </div>

        <!-- 游戏说明界面 -->
        <div id="instructions-screen" class="screen">
            <h2>游戏说明</h2>
            <ul>
                <li>使用 W、A、S、D 键移动角色</li>
                <li>使用鼠标瞄准并点击左键射击</li>
                <li>空格键跳跃</li>
                <li>数字键 1-3 切换武器</li>
                <li>消灭所有敌人获得胜利</li>
                <li>小心敌人的攻击！</li>
            </ul>
            <button id="back-button">返回</button>
        </div>

        <!-- 游戏界面 -->
        <div id="game-screen" class="screen">
            <canvas id="game-canvas"></canvas>
            <div class="game-hud">
                <div class="health">
                    <span>生命值: </span>
                    <div class="health-bar">
                        <div id="health-fill"></div>
                    </div>
                    <span id="health-text">100</span>
                </div>
                <div class="ammo">
                    <span>弹药: </span>
                    <span id="ammo-text">30/120</span>
                </div>
                <div class="weapon">
                    <span>武器: </span>
                    <span id="weapon-text">步枪</span>
                </div>
                <div class="score">
                    <span>分数: </span>
                    <span id="score-text">0</span>
                </div>
                <div class="timer">
                    <span>时间: </span>
                    <span id="timer-text">00:00</span>
                </div>
            </div>
            <button id="pause-button">暂停</button>
        </div>

        <!-- 暂停界面 -->
        <div id="pause-screen" class="screen">
            <h2>游戏暂停</h2>
            <button id="resume-button">继续游戏</button>
            <button id="restart-button">重新开始</button>
            <button id="quit-button">退出游戏</button>
        </div>

        <!-- 游戏结束界面 -->
        <div id="game-over-screen" class="screen">
            <h2>游戏结束</h2>
            <p>最终得分: <span id="final-score">0</span></p>
            <p>存活时间: <span id="final-time">00:00</span></p>
            <button id="play-again-button">再玩一次</button>
            <button id="back-to-menu-button">返回菜单</button>
        </div>

        <!-- 胜利界面 -->
        <div id="victory-screen" class="screen">
            <h2>恭喜胜利！</h2>
            <p>最终得分: <span id="victory-score">0</span></p>
            <p>完成时间: <span id="victory-time">00:00</span></p>
            <button id="victory-again-button">再玩一次</button>
            <button id="victory-menu-button">返回菜单</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>